// loading样式
.loading {
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    // background: rgba(black, .5);
    overflow: hidden;
  }
  .fruit {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(white, .6);
    border: 1px solid white;
    padding: .1rem;
    border-radius: .2rem;
    // box-shadow: 0 0 .03rem rgba(black, .5);
  }
  .wrapper {
    position: relative;
    width: 2rem;
    height: 2rem;
    transform: rotate(0) scale(1);
    animation: loadingRotate 1.2s linear infinite;
  }
  .icon {
    width: 1rem;
    height: .68rem;
    // border:1px solid #ccc;
    position: absolute;
    top: 50%;
    margin-top: -.34rem;
    transform-origin: right center;
    span {
      display: block;
      width: .68rem;
      height: .68rem;
      background-image: url(../assets/images/fruit.png);
      background-size: 1.36rem;
      background-repeat: no-repeat;
      animation: loadingRotate 1.2s linear infinite;
      animation-direction: reverse;
    }
  }
  .icon-1 {
    span {
      background-position: 0 0;
    }
  }
  .icon-2 {
    transform: rotateZ(90deg);
    span {
      background-position: -.68rem 0;
    }
  }
  .icon-3 {
    transform: rotateZ(180deg);
    span {
      background-position: -.68rem -.68rem;
    }
  }
  .icon-4 {
    transform: rotateZ(-90deg);
    span {
      background-position: 0 -.68rem;
    }
  }
  .text {
    font-size: .2rem;
    text-align: center;
    margin-top: .1rem;
    color: #666;
  }

  @keyframes loadingRotate {
    0% {
      transform: rotate(0) scale(1);
    }
    50% {
      transform: rotate(180deg) scale(.8);
    }
    100% {
      transform: rotate(360deg) scale(1);
    }
  }
}
